import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_example/get_put/controller/my_put_controller.dart';

class MyGetValuebuilderPage extends StatelessWidget {
  static const String route = "/MyGetValuebuilderPage";
  const MyGetValuebuilderPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Getx_Valuebuilder"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // 1. initialValue
            // 2. builder
            // 3. onUpdate
            // 4. onDispose

            ValueBuilder<int?>(
              initialValue: 10,
              builder: (value, updateFn) {
                return Column(
                  children: [
                    Text("count -> $value"),
                    ElevatedButton(
                      onPressed: () {
                        updateFn(value! + 1);
                      },
                      child: const Text('ValueBuilder -> add'),
                    )
                  ],
                );
              },
              onUpdate: (value) => debugPrint("Value updated: $value"),
              onDispose: () => debugPrint("Widget unmounted"),
            ),

            const Divider(),

            // 1. initialValue
            // 2. builder
            // 3. onUpdate
            // 4. onDispose
            //String
            ValueBuilder<String?>(
              initialValue: "Audi",
              onDispose: () => debugPrint("释放了"),
              onUpdate: (value) {
                debugPrint("Value updated: $value");
              },
              builder: (value, updateFn) {
                return Column(
                  children: [
                    Text("我要买 -> $value"),
                    ElevatedButton(
                      onPressed: () {
                        updateFn("BWM");
                      },
                      child: const Text('ValueBuilder -> BMW'),
                    )
                  ],
                );
              },
            ),

            //map
            const Divider(),
            ValueBuilder<Map<String, dynamic>?>(
              initialValue: const {"name": "张三", "age": 18},
              builder: (value, updateFn) {
                return Column(
                  children: [
                    Text("姓名 -> ${value!["name"]}"),
                    Text("年龄 -> ${value["age"]}"),
                    ElevatedButton(
                      onPressed: () {
                        updateFn({"name": "李四", "age": 20});
                      },
                      child: const Text('ValueBuilder -> 李四'),
                    )
                  ],
                );
              },
            ),
            //list
            const Divider(),
            ValueBuilder<List<String>?>(
                initialValue: const ["A", "B", "C"],
                builder: (value, updateFn) {
                  return Column(children: [
                    Text("List -> $value"),
                    ElevatedButton(
                      onPressed: () {
                        List<String> newList = [...value!]; // 使用扩展运算符来创建列表的浅拷贝
                        newList.add("${newList.length}");
                        // newList.removeAt(1); // 移除索引为1的元素，并将索引为2的元素移动到索引1的位置
                        newList.shuffle();
                        updateFn(newList); // 使用新列表更新状态
                      },
                      child: const Text('ValueBuilder -> add'),
                    )
                  ]);
                }),

            //List<GetXModels>
            const Divider(),
            ValueBuilder<List<GetXModels>?>(
                initialValue: [GetXModels(name: "Audi"), GetXModels(name: "Audi")],
                builder: (value, updateFn) {
                  return Column(children: [
                    Column(
                      children: value!.map((e) => Text(e.name)).toList(),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        List<GetXModels> newList = [...value];
                        newList[0] = GetXModels(name: "小六");
                        newList.add(GetXModels(name: "王五"));
                        updateFn(newList);
                      },
                      child: const Text('ValueBuilder -> update'),
                    )
                  ]);
                }),

                //GetXModels
            const Divider(),
            ValueBuilder<GetXModels?>(
                initialValue: GetXModels(name: "Audi"),
                builder: (value, updateFn) {
                  return Column(children: [
                    Text("name -> ${value?.name}"),
                    ElevatedButton(
                      onPressed: () {
                        updateFn(GetXModels(name: "BWM"));
                      },
                      child: const Text('ValueBuilder -> BWM'),
                    )]);
                }),

                //bool
            const Divider(),
            ValueBuilder<bool?>(
                initialValue: false,
                builder: (value, updateFn) {
                  return Column(children: [
                    Text("bool -> $value"),
                    ElevatedButton(
                      onPressed: () {
                        updateFn(!(value ?? false));
                      },
                      child: const Text('ValueBuilder -> bool'),
                    )]);
                }),
          ],
        ),
      ),
    );
  }
}
